<template>
  <div>
    <HeaderPage />
    <SearchHeader></SearchHeader>
    <navPage></navPage>
    <div id="box" class="box"
     >
      <div class="box-banner">
        <ul>
          <li><a class="banner-a" href="/farmProducts/index1?type=NCP" target="_self">农产品专区</a></li>
          <li><a class="banner-a" href="/farmProducts?type=NZ" target="_blank">农资专区</a></li>
          <li><a class="banner-a" href="/property" target="_blank">产权专区</a></li>
          <li><a class="banner-a" href="/shareCropland" target="_blank">共享农田</a></li>
        </ul>
      </div>
      <div class="main" v-loading="loading">
        <div class="large-class clearfix">
          <strong class="fl">分类：</strong>
          <ul class="fl">
            <li
              v-for="(item, index) in navList"
              :key="index"
              :class="[navIndex == index ? 'active' : '']"
              @click="navTabs(index, item)"
            >
              {{ item.name }}
            </li>
          </ul>
        </div>
        <div class="small-class large-class" style="border-top: 0">
          <div
            class="small-box clearfix"
            v-for="(item, index) in otherClass"
            :key="index"
          >
            <!-- 二级分类名 -->

            <li
              :class="[activeFIndex == activeFIndex ? 'active' : '']"
              @click="smallFHeightlight(index, item)"
            >
              <div
                class="fl"
                style="
                  height: 40px;
                  width: 60px;
                  font-size: 13px;
                  color: #000000;
                  margin-top: 10px;
                "
              >
                {{ item.name }}:
              </div>
            </li>

            <!-- <strong >{{ item.name }}</strong> -->

            <!-- 三级分类名 -->
            <ul
              class="fl"
              :style="{ height: showMoreIndex == index ? 'auto' : '36px' }"
            >
              <li
                v-for="(secondItem, secondIndex) in item.childrens"
                :key="secondIndex"
                :class="[classifyId == secondItem.classifyId ? 'active' : '']"
                @click="smallHeightlight(secondIndex, secondItem)"
              >
                <div style="margin-top: 6px; font-size: 13px">
                  {{ secondItem.name }}
                </div>
              </li>
            </ul>

            <!-- 三级分类旁边的更多 -->
            <div class="more fr" @click="more(index)">
              <span :class="[showMoreIndex == index ? 'active' : '']"
                >更多</span
              >
              <img
                src="../../assets/img/down-circle.png"
                alt=""
                v-if="showMoreIndex == index"
              />
              <img src="../../assets/img/down-circle-right.png" v-else lt="" />
            </div>
          </div>
        </div>
        <div class="base-box" v-if="baseList != undefined && baseList.length > 0">
          <ul>
            <li v-for="(item, index) in baseList" :key="index">
              <div class="slide product-pic fl">
                <el-carousel trigger="click" height="198px" :autoplay="false">
                  <el-carousel-item
                    v-for="(itemSecond, secondIndex) in item.imgUrl"
                    :key="secondIndex"
                    class="slide-img"
                    style="height:198px;"
                  >
                    <img
                      :src="
                        baseUrl +
                          '/sys/file/showpic?id=' +
                          itemSecond
                      "
                      alt=""
                    />
                  </el-carousel-item>
                  <el-carousel-item
                    v-for="(itemThree, threeIndex) in item.videoArr"
                    :key="threeIndex"
                    class="slide-video"
                  >
                    <video
                      :src="
                        baseUrl +
                          '/sys/file/showvideo?id=' +
                          itemThree
                      "
                      controls
                      alt=""
                    />
                  </el-carousel-item>
                </el-carousel>
              </div>
              <div class="product-info fl">
                <p class="product-name">{{ item.baseName }}</p>
                <p class="base-info">
                  <span>基地面积：{{ item.baseArea }}亩</span>
                  <span>基地种植物：{{ item.growPlants }}</span>
                </p>
                <p class="base-address">基地地址：{{ item.basePosition }}</p>
                <p v-show="item.detailDescribe" class="base-address" style="line-height:22px;">基地简介：{{ item.detailDescribe }}</p>
              </div>
              <div class="product-box" style="clear:both;">
                <ul class="clearfix" v-if="item.materials.length > 0">
                  <li
                    v-for="(item, index) in item.materials"
                    :key="index"
                    @click="toDetail(item)"
                  >
                    <img
                      :src="
                        baseUrl + '/sys/file/showpic?id=' +
                        spimgurl(item.iconUrl)
                      "
                      alt=""
                      class="goods-pic"
                    />
                    <p class="goods-name">
                      {{ item.materialName }}
                    </p>

                    <div class="goods-footer clearfix">
                      <div class="price-and-unit fl clearfix">
                        <p v-if="item.standPrice > 0" class="price">¥{{ item.standPrice }}元/{{ item.unit }}</p>
                        <p v-else>价格：电议</p>
                      </div>
                      <img src="../../assets/img/cart.png" class="fr car" alt="" />
                    </div>
                  </li>
                </ul>
              </div>
            </li>
          </ul>
        </div>
        <div
            v-else
            style="text-align: center; margin-top: 60px; margin-bottom: 60px"
          >
            <img src="../../assets/img/noData.png" />
            <p style="font-size: 14px; color: #666">暂无数据</p>
          </div>
        <div class="pagination">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <FooterPage></FooterPage>
    <div class="sideBar">
      <div>
        <div class="tips">在线客服</div>
        <ul class="list">
            <li>QQ:1605821757</li>
            <li>QQ:1640261872</li>
            <li>QQ:1605821757</li>
            <li>QQ:1640261872</li>
            <li>QQ:1605821757</li>
        </ul>
      </div>
    </div>
    <div class="fh"><a href="#box">返回</a></div>
  </div>
</template>
<script>
import HeaderPage from "../../components/head";
import SearchHeader from "../indexHome/searchHeader";
import FooterPage from "../../components/footer";
import navPage from "../../components/nav";
import { mapState } from "vuex";
export default {
  components: {
    HeaderPage,
    SearchHeader,
    FooterPage,
    navPage,
  },
  watch: {
    keyWord(val) {
      this.getbaseList();
    },
  },
  computed: {
    ...mapState({
      keyWord: "keyWord",
    }),
  },
  mounted() {
    var pageFlag = this.$route.query.type;
    if (pageFlag != null) {
      this.classifyFlag = pageFlag;
      console.log("分类标识：", pageFlag);
    }

    this.getGoodsClassification();
    this.getbaseList();
  },
  data() {
    return {
      baseList: [],
      showMoreIndex: -1,

      navList: [],

      //一级分类菜单 选中项
      navIndex:
        this.$route.query.classifyIndex == undefined
          ? 0
          : this.$route.query.classifyIndex,

      //二级分类菜单  选中
      activeFIndex:
        this.$route.query.classifyChildIndex == undefined
          ? 0
          : this.$route.query.classifyChildIndex,

      //三级分类菜单  选中
      activeIndex: -1,

      otherClass: [],
      productList: [],
      classifyId:
        this.$route.query.classifyId == undefined
          ? (this.$route.query.type == 'NCP' ? 0 : '')
          : this.$route.query.classifyId,
      classifyFlag: "",
      pageSize: 10,
      total: 0,
      pageNum: 1,
      name: this.$route.query.name == undefined ? "" : this.$route.query.name,
      sort: 0,
      loading: false,
    };
  },
  methods: {
    // 加入购物车
    joinCar(id) {
      if (Cookie.get("token")) {
        this.$http(
          "post",
          "/sys/iaShoppingTrolley/add.do",
          { materialId: id, num: 1 },
          "json"
        ).then((res) => {
          if (res.code == "0000") {
            this.$message({
              type: "success",
              message: "加入成功",
            });
            this.$store.commit("joinCar", 1);
          }
        });
      } else {
        this.$router.push("/login");
      }
    },
    navTabs(index, item) {
      this.navIndex = index;
      this.activeIndex = -1;

      console.log("item数据", item);
      console.log("分类切换");

      this.classifyId = item.classifyId;
      this.otherClass = this.navList[index].childrens;
      console.log("一级分类的子分类：", this.navList[index].childrens);

      this.getbaseList();
    },
    more(index) {
      this.showMoreIndex = index;
    },

    //二级 分类 点击
    smallFHeightlight(index, item) {
      console.log("二级分类点击的数据：", index, item);
      this.activeFIndex = index;
      this.classifyId = item.classifyId;
      this.getbaseList();
    },

    //三级 分类 点击
    smallHeightlight(index, item) {
      this.activeIndex = index;
      this.classifyId = item.classifyId;
      this.getbaseList();
    },
    sortt() {
      this.sort = 2;
      this.getbaseList();
    },
    //获取分类数据
    getGoodsClassification() {
      var plateStr = "";

      if (this.classifyFlag === "NCP") {
        plateStr = "CORPS";
      } else if (this.classifyFlag === "NZ") {
        plateStr = "APRODUCT";
      }

      this.$http(
        "get",
        "/sys/iaCommodityClassify/getCommodityClassifyTree.do",
        {
          plate: 'CORPS', //(CORPS: 农产品; APRODUCT: 农资产品)
          classifyId: this.classifyId == '' ? 0 : this.classifyId,
        }
      ).then((res) => {
        if (res.code == "0000") {
          if (res.result) {
            this.navList = res.result;
            console.log(res);
            if (res.result.length > 0) {
              this.otherClass = this.navList[this.navIndex].childrens;
            }
          }
        }
      });
    },

    //获取商品数据
    getList() {
        var httpStr = "";

      if (this.classifyFlag === "NCP") {

        httpStr = "/sys/iaMaterialCorps/getOfficialPage.do";

      } else if (this.classifyFlag === "NZ") {

        httpStr = "/sys/iaMaterialCorps/getProductOfficialPage.do";

      }else{

        //默认农产品
        httpStr = "/sys/iaMaterialCorps/getOfficialPage.do";

      }


      this.loading = true;
      this.$http("get", httpStr, {
        classifyId: this.classifyId,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        name: this.$store.state.keyWord,
        sort: this.sort,
      })
        .then((res) => {
          if (res.code == "0000") {
            var data = res.result;
            if (data.rows) {
              this.productList = data.rows;
            } else {
              this.productList = [];
            }

            this.total = data.total;
          }
          this.loading = false;
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    //处理图片分隔
    spimgurl(value) {
      if (value != null) {
        let ff = value.split(",");
        if (ff != null && ff.length > 0) {
          const element = ff[0];
          var elmentList = element.split(":");
          return elmentList[0];
        }
      }
      return "";
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = val;
      this.getList();
    },
    // 去详情页
    toDetail(item) {
      this.$router.push({
        path: "/farmProducts/detail",
        query: { materialId: item.materialId, pageType: this.classifyFlag },
      });
    },
    //获取基地列表
    getbaseList(page) {
      this.loading = true;
      this.$http(
        "get",
        "/sys/iaMaterialCorps/getNewOfficialPage1.do",
        {
          pageNum: page || this.pageNum,
          pageSize: this.pageSize,
          name: this.$store.state.keyWord,
          classifyId: this.classifyId
        }
      )
        .then(res => {
          if (res.code == "0000") {
            var data = res.result;
            var rows = data.rows;
            for (var k in rows) {
              rows[k]["imgUrl"] = [];
              rows[k]["videoArr"] = [];

               if (rows[k].iconUrl) {

                var splitList = rows[k].iconUrl.split(",");
                for (let index = 0; index < splitList.length; index++) {
                  const element = splitList[index];
                  var elmentList = element.split(":");
                  rows[k]["imgUrl"].push(elmentList[0]);
                }
              }

              if (rows[k].videoUrl) {
                var splitList = rows[k].videoUrl.split(",");
                for (let index = 0; index < splitList.length; index++) {
                  const element = splitList[index];
                  var elmentList = element.split(":");
                  rows[k]["videoArr"].push(elmentList[0]);
                }
              }

            }
            console.log(rows);
            this.baseList = rows;
            this.total = data.total;
          }
          this.loading = false;
        })
        .catch(err => {
          this.loading = false;
        });
    },
  },
};
</script>npe
<style scoped>
.box {
  width: 1200px;
  margin: 0 auto;
  padding-bottom: 20px;
  min-height: 400px;
  background: #fff;
}
.box .box-banner {
  background-image: url("../../assets/img/farmBg001.png");
  height: 83px;
}
.box .box-banner ul li {
  height: 33px;
  line-height: 33px;
  display: inline-block;
  margin: 30px 0px 0px 50px;
  padding: 10px;
}
.box .box-banner .banner-a {
  font-size: 22px;
  color: white;
}
.box .box-banner .banner-b {
  font-size: 22px;
  color: white;
}
.main {
  width: 1122px;
  margin: 9px 39px;
}
.large-class {
  width: 1092px;
  background: #faf7f5;
  border: 1px solid #e6e6e6;
  padding: 14px 15px;
}

.large-class strong {
  font-size: 14px;
  color: #4a4a4a;
  width: 60px;
}
.large-class ul {
  width: 1000px;
}
.large-class ul li {
  float: left;
  font-size: 14px;
  color: #4a4a4a;
  padding: 0 10px;
  cursor: pointer;
  margin-bottom: 6px;
}
.large-class ul li.active {
  color: #ee781b;
}
.large-class ul li:hover {
  color: #ee781b;
}
.small-box {
  margin-bottom: 15px;
}
.small-box ul {
  width: 900px;
  overflow: hidden;
  height: 26px;
  line-height: 26px;
}
.more {
  cursor: pointer;
}
.more span {
  color: #a5a5a5;
  font-size: 14px;
}
.more span.active {
  color: #f48d06;
}
.more img {
  width: 14px;
  height: 14px;
  margin-bottom: 3px;
}
</style>
<style scoped>
.sideBar {
	position:fixed;
	right:-182px;
	top:50px;
	background-color:#ffffff;
	border:#eea236 solid 1px;
	transition:right 0.5s;
	border:solid 1px #eea236;
}
.sideBar:hover {
	right:0;
}
.sideBar>div {
	position:relative;
}
.sideBar .tips {
	position:absolute;
	height:120px;
	line-height:25px;
	background-color:#eea236;
	width:40px;
	left:-40px;
	top:50px;
	text-align:center;
	box-sizing:border-box;
	padding:10px 10px;
	border-top-left-radius:5px;
	border-bottom-left-radius:5px;
	font-weight:bold;
	color:#ffffff;
}
.sideBar .list {
	padding:0;
	list-style:none;
	width:180px;
	margin:0;
}
.sideBar .list>li {
	padding:15px;
	border-top:#eea236 dashed 1px;
}
.sideBar .list>li:hover {
	background-color:#f0ad4e;
	color:#ffffff;
}
.sideBar .list>li:first-child {
	border-top:none;
}
</style>
<!-- 基地列表样式 -->
<style scoped>
.base-box ul {
  width: 1077px;
  margin: 20px 0px 0px 0px;
}
.base-box ul li {
  height: auto;
  padding: 11px 18px 19px 0px;
  box-sizing: border-box;
  margin-bottom: 12px;
  border-bottom: 1px solid #ececec;
}
.base-box ul li .product-pic {
  width: 221px;
  height: 198px;
  margin-right: 50px;
  background: #ececec;
}
.base-box ul li .product-name {
  font-size: 16px;
  color: #292929;
  margin-top: 9px;
  margin-bottom: 16px;
}
.base-box ul li .base-info span {
  font-size: 13px;
  color: #4a4a4a;
  margin-top: 5px;
}
.base-box ul li .base-address {
  font-size: 13px;
  color: #4a4a4a;
  margin-top: 16px;
}
.slide-video video{
  width: 100%;
  height: 100%;
}
.search-box {
  margin-left: 79px;
  margin-top: 32px;
  width: 295px;

  height: 32px;
  border: 1px solid #dcdcdc;
  border-right: 0;
}
.search-box img {
  width: 20px;
  height: 20px;
  font-size: 14px;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 6px;
}
.search-box input {
  width: 206px;
  height: 32px;
  border: 0;
}
.search-box p {
  width: 45px;
  height: 30px;
  background: #f48d06;
  border-radius: 2px 0px 0px 2px;
  border: 1px solid #f48d06;

  font-size: 12px;
  line-height: 32px;
  text-align: center;
  color: #fff;
  float: left;
  cursor: pointer;
}
.search-box p:active {
  border: 0;
  background: #ee781b;
}
</style>
<style>
.slide .el-carousel__arrow {
  width: 15px;
  height: 15px;
}
.slide .el-carousel__arrow--left {
  left: 4px;
}
.slide .el-carousel__arrow--right {
  right: 4px;
}
.slide .el-carousel__button {
  width: 6px;
  height: 6px;
  background: #fff;
  border-radius: 6px;
}
.slide .el-carousel__container {
  width: 100%;
}
.slide .el-carousel__indicators--horizontal {
  width: 100%;
  text-align: center;
}
.slide .el-carousel__item {
  height: 198px;
}
.slide .el-carousel__indicator--horizontal {
  padding: 2px 4px;
}
.slide .is-active .el-carousel__button {
  background: #ee781b;
}
.slide-img img {
  width: 100%;
  height: 100%;
}
.product-info {
  width: 600px;
}
</style>
<!-- 产品列表样式 -->
<style scoped>
.product-box ul li {
  float: left;
  /* display: inline-block; */
  width: 174px;
  height: 253px;
  background: #ffffff;
  border: 1px solid #e4e4e4;
  padding: 12px;
  box-sizing: border-box;
  margin: 15px 6px 0px 0px;
}
.product-box ul li:nth-child(6n) {
  margin-right: 0;
}
.product-box ul li:hover {
  border: 2px solid #f59206;
  cursor: pointer;
}
.product-box ul li .goods-pic {
  width: 152px;
  height: 152px;
}
.product-box ul li .goods-name {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-top: 5px;
  height: 34px;
  margin-bottom: 10px;
}
.product-box ul li .price-and-unit {
  vertical-align: bottom;
  height: 24px;
  padding-top: 10px;
}
.product-box ul li .price-and-unit .price {
  font-size: 16px;
  color: #d0021b;
  float: left;
}
.product-box ul li .price-and-unit .unit {
  font-size: 12px;
  color: #d0021b;
  margin-left: 5px;
  float: left;
}
.product-box ul li .price-and-unit p {
  display: inline;
}
.product-box ul li .car {
  width: 17px;
  height: 17px;
  margin-top: 10px;
}
.pagination {
  clear: both;
  margin-left: 400px;
  margin-top: 40px;
}
.fh {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 40px;
  height: 50px;
}
.fh a {
  background: #eea236;
  border-radius:10px;
  /* height: 15px;
  width: 15px; */
  color: wheat;
  padding: 8px;
}
</style>